<template>
  <div class="container">
    <el-row :gutter="20" class="header_demo">
      <el-col :span="5" class="header_demo_1" style="background: rgb(7, 46, 71); opacity: 0.9; color: bisque;">
        <h2>正在运行车辆 </h2>
        <countup class="card-num" :end=departures />
      </el-col>
      <el-col :span="5" class="header_demo_1" style="background: rgb(7, 46, 71); opacity: 0.9; color: bisque;">
        <h2>故障车辆 </h2>
        <countup class="card-num" :end=breakdown />
      </el-col>
      <el-col :span="5" class="header_demo_1" style="background: rgb(7, 46, 71); opacity: 0.9; color: bisque;">
        <h2>车辆总数 </h2>
        <countup class="card-num" :end=vehicle />
      </el-col>
      <el-col :span="5" class="header_demo_1" style="background: rgb(7, 46, 71); opacity: 0.9; color: bisque;">
        <h2>员工总数 </h2>
        <countup class="card-num" :end=employee />
      </el-col>
    </el-row>

    <el-row :gutter="2" class="main_demo">
      <el-col class="main_demo_1" :span="15">
        <ECharts :option="chartConfig" />
      </el-col>
      <el-col class="main_demo_2" :span="8">
        <span>山顶温度</span>
        <ECharts :option="option" style="width: 100%; height: 90%;" />
      </el-col>
    </el-row>

    <el-row class="main_demo_e" :gutter="20">
      <el-col :span="16" class="main_demo_e_1">
        <ECharts :option="option_2" />
      </el-col>
      <el-col class="main_demo_e_2" :span="7">
        <span style="font-size: 20px; font-weight: bold; color: black; opacity: 0.8;">线路分配比例TOP5</span>
        <div class="demo-progress">
          <el-progress :text-inside="true" :stroke-width="25" :percentage="50" :striped ="true" :duration="10" :striped-flow="true"/>
          <el-progress :text-inside="true" :stroke-width="25" :percentage="20" status="success" :striped ="true" :duration="10" :striped-flow="true"/>
          <el-progress :text-inside="true" :stroke-width="25" :percentage="80" status="warning" :striped ="true" :duration="10" :striped-flow="true"/>
          <el-progress :text-inside="true" :stroke-width="25" :percentage="60" status="exception" :striped ="true" :duration="10" :striped-flow="true"/>
          <el-progress :text-inside="true" :stroke-width="25" :percentage="80" status="info" :striped ="true" :duration="10" :striped-flow="true"/>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="5" class="bottom_demo">
      <el-col :span="8" class="bottom_demo_1">
        <ECharts :option="option_3"/>
      </el-col>
      <el-col :span="7" class="bottom_demo_1">
        <ECharts :option="option_4"/>
</el-col>
      <el-col :span="8" class="bottom_demo_1">

</el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue'
import countup from '../components/countup.vue'
import ECharts from '../components/ECharts.vue';
import chartOption from '../echarts/chartOption.js';
import option_1 from '../echarts/option.js';
import prettier from '../echarts/prettier.js'
import bread from '../echarts/bread.js'
import proportion from '../echarts/proportion.js';
import { getAvailable, getCountRun, getCountEmployee, getCountVehicle } from '../api/data.js' 
import { ElMessage } from 'element-plus';

const ElData = reactive({
  departures: '',
  breakdown: '',
  vehicle: '',
  employee: '',
  chartConfig: chartOption,
  option: option_1,
  option_2: prettier,
  option_3: bread,
  option_4: proportion,

})


const getMaintenance = async() =>{
  try{
    const result = await getAvailable();
    console.log(result)
    if(result.data.code === 200){
      ElData.breakdown = result.data.data
    }
  }catch(error){
    ElMessage.error("无法获取")
  }
}

const getRun = async() =>{
  try{
    const result = await getCountRun();
    console.log(result)
    if(result.data.code === 200){
      ElData.departures = result.data.data
    }
  }catch(error){
    ElMessage.error("无法获取")
  }
}

const getEmployee = async() =>{
  try{
    const result = await getCountEmployee();
    console.log(result)
    if(result.data.code === 200){
      ElData.employee = result.data.data
    }
  }catch(error){
    ElMessage.error("无法获取")
  }
}

const getVehicle = async() =>{
  try{
    const result = await getCountVehicle();
    console.log(result)
    if(result.data.code === 200){
      ElData.vehicle = result.data.data
    }
  }catch(error){
    ElMessage.error("无法获取")
  }
}

const { departures, breakdown, vehicle, employee, chartConfig, option, option_2, option_3, option_4 } = toRefs(ElData)

onMounted(()=>{
  getMaintenance(),
  getRun(),
  getEmployee(),
  getVehicle()
})
</script>

<style scoped>
.container{
  background-image: url(../assets//bg01.png);
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 10px;
}

.header_demo {
  height: 125px;
  margin-top: -5px;
}

.header_demo_1 {
  border-radius: 20px;
  margin-left: 44px;
  /* box-shadow: 2px 2px rgb(93, 98, 102); */
}

.header_demo_1 h2 {
  margin-top: 5px;
}

.card-num {
  margin-top: -20px;
  font-size: 80px;
  text-align: center;
  display: block;
  font-family: 'LEDFont';
}

.main_demo {
  /* border: 1px solid sienna; */
  margin-top: 30px;
  height: 380px;
}

.main_demo_1 {
  border: 1px solid grey;
  border-radius: 20px;
  box-shadow: 2px 2px gray;
}

.main_demo_2 {
  border: 1px solid grey;
  margin-left: 30px;
  border-radius: 20px;
  box-shadow: 2px 2px gray;
}

.main_demo_2 span {
  font-size: 18px;
  font-weight: bold;
  color: rgb(102, 101, 101);
}

.main_demo_e {
  /* border: 1px solid silver; */
  margin-top: 30px;
  height: 380px;
}

.main_demo_e_1 {
  /* border: 1px solid rgb(150, 150, 34); */
}

.main_demo_e_2 {
  margin-left: 20px;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
  margin-top: 30px;
}

.bottom_demo{
  /* border: 1px solid saddlebrown; */
  margin-top: 30px;
  margin-bottom: 20px;
  height: 380px;
}

.bottom_demo_1{
  border: 1px solid silver;
  margin-left: 15px;
  border-radius: 20px;
  box-shadow: 2px 2px rgb(207, 207, 207);
}


</style>

<style>
  @font-face {
  font-family: 'LEDFont';
  src: url(../LED/UnidreamLED.ttf);
}
</style>